<template>
  <div class="dynamic align-items_center radius_default">
    <van-image
      class="good-image"
      width="100px"
      height="100px"
      fit="cover"
      position="center"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
    />

    <div class="p_xs flex_1">
      <div class="title">
        魅族20 白色魅族20 白色魅族20 白色魅族20 白色魅族20 白色魅族20 白色
      </div>
      <div class="mt_xs">
        <small class="amount">浏览量887</small>
      </div>
      <div class="price h4 mt_xs">
        <small class="dollar">¥</small>999<small class="unit">/两</small>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Dynamic',
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.dynamic {
  background: #fff;
  height: 100px;

  ::v-deep(.good-image) {
    img {
      border-bottom-left-radius: map-get($radii, default) !important;
      border-top-left-radius: map-get($radii, default) !important;
    }
  }

  .title {
    display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    -webkit-line-clamp: 1; /* 限制显示两行 */
    overflow: hidden; /* 隐藏超出范围的内容 */
    text-overflow: ellipsis; /* 使用省略号 */
  }
  .price {
    font-weight: bold;
    color: #ff4f24;
    .dollar {
      font-size: 12px;
    }
    .unit {
      font-size: 14px;
    }
  }
  .amount {
    color: #999;
  }
}
</style>
